Ajax从后台获取数据在前端显示（原生js与jQuery） |
您所在的位置：网站首页 › js 数组赋值页面上没展示出来 › Ajax从后台获取数据在前端显示（原生js与jQuery） |
Ajax从后台获取数据在前端显示（原生js与jQuery）
|
1、Ajax简介
Ajax(Asynchronous Javascript And XML)=异步的 javascript 和XML ，使网页在不重新加载整个页面的情况下，对页面的局部进行刷新，传统的网页(若不使用AJAX)在打开页面时，是需要加载出此页面所有的内容。Ajax是一种新的思想， 是与服务器交换数据并更新网页局部的艺术。 2、Ajax实现步骤js原生使用JavaScript获取浏览器XMLHttpRequest内置对象，Ajax的核心。 let xml=new XMLHttpRequest();建立连接方式与请求内容：open()方法，有三个参数，第一个参数为请求方式，第二个参数为请求的路径，第三个参数为对请求是否为异步处理。 xml.open("get","queryUserInfo",true);设置事件句柄，回调函数 xml.onreadystatechange=function(){ /* readyState ==0:request未初始化(调用open()之前) readyState ==1:request已提出(调用send()之前) readyState ==2:request已发送 readyState ==3:request正在处理中(服务器还未完成响应) readyState ==4:判断request已完成(可以访问服务器) status==200:判断request是否执行成功 status==404:表示“Not Found” */ if(xml.readyState==4&&xml.status==200){ }发送数据 xml.send(null);//以get方式提交，以post方式提交时，需要指定需要传送的参数 3、代码实现，js原生前提，搭建maven项目，加载Tomcat，添加依赖。
pom.xml,添加依赖，将依赖添加到dependencies当中 javax.servlet javax.servlet-api 4.0.1 provided com.alibaba fastjson 1.2.75user实体类 package com.ajax.model; public class User { private int userId; private String userName; private String userSex; private int userAge; private String userTel; private String userAddress; public int getUserId() { return userId; } public void setUserId(int userId) { this.userId = userId; } public String getUserName() { return userName; } public void setUserName(String userName) { this.userName = userName; } public String getUserSex() { return userSex; } public void setUserSex(String userSex) { this.userSex = userSex; } public int getUserAge() { return userAge; } public void setUserAge(int userAge) { this.userAge = userAge; } public String getUserTel() { return userTel; } public void setUserTel(String userTel) { this.userTel = userTel; } public String getUserAddress() { return userAddress; } public void setUserAddress(String userAddress) { this.userAddress = userAddress; } }servlet，查询所有user信息(queryUserInfo) package com.ajax.servlet; import com.ajax.model.User; import com.alibaba.fastjson.JSONArray; import com.alibaba.fastjson.JSONObject; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; import java.util.ArrayList; import java.util.List; @WebServlet("/queryUserInfo") public class QueryUserInfo extends HttpServlet { @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //设置数据的格式为json response.setContentType("json/application;charset=utf-8"); List list=new ArrayList(); //添加user信息 for(int i = 1;i AjaxDemo .box{ width: 80%; margin: 15vh auto; } table{ text-align: center; } table th{ text-align: center; } ID 用户名 性别 年龄 电话 城市js原生，外部引用 show.js // 使用ajax动态获取表格数据 window.onload = function (){ //1创建XMLHttpRequest对象 let xml=new XMLHttpRequest(); //建立连接 xml.open("get","queryUserInfo",true); //设置回调函数 xml.onreadystatechange=function(){ /* readyState ==4:判断request已完成(可以访问服务器) status==200:判断request是否执行成功 */ if(xml.readyState==4&&xml.status==200){ //获取到响应数据 let vals = xml.responseText; //控制台打印 console.log(vals); //转为json格式 let jsonArr=eval(vals); //tbody填入数据 let temp = ''; //获取tbody标签 let tbody=document.getElementById("userData"); for(let user of jsonArr){ temp += '' + '' + user.userId + '' + '' + user.userName + '' + '' + user.userSex + '' + '' + user.userAge + '' + '' + user.userTel + '' + '' + user.userAddress + '' + ''; } tbody.innerHTML = temp; } } //发送数据 xml.send(null); } 4、jQuery实现1）前言：jQuery入口函数的几种书写方式 $(document).ready(function () { alert(“测试1”); });jQuery(document).ready(function () { alert(“测试2”); });$(function () { alert(“测试3”); });jQuery(function () { alert(“测试4”); });2）jQuery经过封装，将ajax封装了，使用起来就比较简单了$.ajax()返回其创建的XMLHttpRequest对象。 常用参数 url : 请求地址 type : 请求方式类型, 默认是"get", 常用的还有post dataType : 设置返回的数据格式,如html, xml, text, json data : 设置发送给服务器的数据 success : 设置请求成功后的回调函数( 第二种方式用done ) error : 设置请求失败后的回调函数, ( 第二种方式用fail )$.ajax()写法一 $(document).ready(function (){ //获取tbody let userData = $("#userData"); let temp = ''; $.ajax({ //请求路径servlet url: "queryUserInfo", type: "get", dataType: "json", async: true,//是否异步 //请求成功 success: function (msg){ let users = msg; userData.empty();//清空 for (let i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |